<template>
	<div class="wrapper">
		<van-image src="http://www.dell-lee.com/imgs/vue3/user.png" />
		<div class="input">
			<input type="number" placeholder="请输入手机号" />
		</div>
		<div class="input">
			<input type="password" placeholder="请输入密码" />
		</div>
		<div class="input">
			<input type="password" placeholder="确认密码" />
		</div>
		<div class="register-btn" @click="registerSubmit">注册</div>
		<div class="register-link" @click="toLogin">已有帐号 去登录</div>
	</div>
</template>

<script>
import { useRouter } from 'vue-router';
export default {
	name: 'Register',
	setup () {
		const router = useRouter(); // 获取路由实例
		const registerSubmit = () => { };
		const toLogin = () => {
			router.push({ name: 'Login' });
		};
		return {
			registerSubmit,
			toLogin,
		};
	},
};
</script>

<style lang="scss" scoped>
.wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
	.img {
		width: 0.66rem;
		height: 0.66rem;
		display: block;
		margin: 0 auto 0.4rem;
	}
	.input {
		height: 0.48rem;
		line-height: 0.48rem;
		background: #f9f9f9;
		border: 0.01rem solid rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		margin: 0 0.4rem 0.16rem;
		input {
			width: 100%;
			height: 0.46rem;
			padding: 0 0.16rem;
			border: none;
			outline: none;
			background: none;
			box-sizing: border-box;
			color: #777;
			font-size: 0.16rem;
			&::placeholder {
				color: #999;
				font-size: 0.16rem;
			}
		}
	}
	.register-btn {
		background-color: #0091ff;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
		border-radius: 4px;
		color: #fff;
		margin: 0.32rem 0.4rem 0.16rem;
		text-align: center;
		height: 0.48rem;
		line-height: 0.48rem;
		font-size: 0.16rem;
	}
	.register-link {
		font-size: 0.14rem;
		color: #777;
		text-align: center;
	}
}
</style>
